<template>
  <div class="aside" :style="{ width: dynamicWidth }" @click="closeaside">
    <div class="logo" @click.stop="home">
      <img src="../../public/img/logo.jpg" alt="" />
      <span :class="{ close: isclosespan }">MyFreeMP3</span>
    </div>
    <div class="nav-bar" @click.stop>
      <router-link class="nav-item" to="/" active-class="active" exact>
        <svg
          t="1682134724592"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2764"
          id="mx_n_1682134724593"
          width="20"
          height="20"
        >
          <path
            d="M681.319 966.181c-29.171 0-45.189-12.014-53.771-22.308-16.589-20.021-21.165-29.744-21.165-62.349v-237.387c0-19.449-1.716-24.595-2.86-25.741 0 0-3.434-1.716-13.155-1.716h-148.724c-24.595 0-28.603 1.716-28.603 30.89v233.382c0 32.605-4.003 41.757-21.165 62.349-8.579 10.297-24.595 22.308-53.771 22.308h-88.662c-23.453-0.571-39.47-6.293-53.197-18.876-9.726-8.579-25.169-28.028-25.169-58.917 0-55.484 0-111.542 0.571-167.029 0-46.333 0.571-93.237 0.571-140.144-16.589 0-33.75 0-50.91-0.571h-2.288c-42.33-1.716-50.91-25.169-50.91-65.78 0-40.039 10.868-53.771 24.595-67.498 76.651-76.077 155.59-151.011 232.812-224.231 37.754-35.465 76.077-72.646 114.403-108.683 4.003-4.003 7.438-7.438 10.868-10.297 21.165-20.592 35.465-34.319 56.058-37.182 2.288 0 4.576 0 6.863 0 20.592 2.288 34.319 16.016 56.058 37.182 3.434 3.434 6.863 6.863 10.868 10.297 37.754 36.607 76.651 73.219 114.403 108.683 76.651 72.646 156.159 148.154 232.812 224.231 14.299 13.728 24.595 28.028 24.595 67.498 0 40.039-8.579 64.066-50.91 65.78h-2.288c-17.163 0.571-34.319 0.571-50.91 0.571 0 46.906 0 93.237 0.571 140.144 0 56.058 0.571 111.542 0.571 167.029 0 30.89-16.016 50.335-25.169 58.917-13.728 13.155-29.744 18.876-52.627 18.876l-90.379 0.571zM189.956 524.014c4.003 0 7.438 0 11.439 0 15.443 0 28.028 12.585 28.028 28.603 0 56.058 0 112.689-0.571 168.743 0 56.058-0.571 111.542-0.571 167.029 0 6.863 2.288 13.155 7.438 17.731 2.288 1.716 4.003 3.434 14.873 4.003h88.089c6.863 0 9.726-1.716 10.297-1.716 8.011-9.151 8.011-9.151 8.011-25.741v-233.382c0-58.917 28.028-88.089 85.232-88.089h148.724c72.646 0 72.646 58.917 72.646 84.086v237.387c0 16.589 0 16.589 8.011 25.741 0.571 0.571 2.86 1.716 10.297 1.716h88.662c10.297 0 12.585-1.716 14.299-4.003 5.149-4.576 7.438-10.297 7.438-17.731 0-55.484 0-110.973-0.571-167.029 0-56.058-0.571-112.115-0.571-168.743 0-15.443 12.585-28.028 28.028-28.603 8.579 0 17.731 0 26.313 0 17.163 0 33.179 0 49.193-0.571 0-2.288 0-5.721 0-9.151 0-19.449-1.716-21.165-8.011-27.457-76.077-75.506-155.015-150.441-231.666-223.088-37.754-35.465-76.651-72.646-114.403-109.255-4.003-4.003-7.438-7.438-10.868-10.868-6.863-6.863-14.299-14.299-19.449-18.307-5.149 4.003-12.585 11.439-19.449 18.307-3.434 3.434-6.863 6.863-10.868 10.868-37.754 36.607-76.651 73.219-114.403 109.255-76.651 72.646-155.59 147.58-231.666 223.088-6.293 6.293-8.011 8.011-8.011 27.457 0 4.003 0 6.863 0 9.151 16.016 0.571 32.034 0.571 49.193 0.571 5.149 0 10.297 0 14.873 0z"
            p-id="2765"
            fill="#312f2fc0"
          ></path>
        </svg>
        <span :class="{ close: isclosespan }"> 发现音乐 </span>
      </router-link>
      <router-link class="nav-item" to="/discovery" active-class="active">
        <svg
          t="1681549537473"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2770"
          width="20"
          height="20"
        >
          <path
            d="M829.1 195.7c84.2 84.2 127.7 189.9 130.8 317.1-3.1 127.2-46.6 232.9-130.8 317.1S639.2 957.6 512 960.7c-127.2-3.1-232.9-46.6-317.1-130.8C110.6 745.7 66.7 640 64 512.8c2.7-127.2 46.6-232.9 130.8-317.1C279 111.5 384.8 68 512 64.9c127.2 3.1 232.9 46.6 317.1 130.8z m-45.2 589c72.1-72.1 109.7-163 112.9-271.9C893.6 404 856 313 783.9 240.9 711.7 168.8 620.8 131.2 512 128c-109.3 3.1-199.8 40.8-271.9 112.9C167.5 313 129.9 404 127.2 512.8c2.7 109.3 40.3 199.8 112.9 271.9 72.1 72.1 163 109.7 271.9 112.9 108.8-2.7 199.7-40.3 271.9-112.9z m-74.4-469.4L624 504.7c1.3 15.7-0.9 31.4-6.7 46.6-5.4 15.2-14.3 28.7-26.4 40.8-12.1 12.1-25.5 20.6-40.8 26.4-15.2 5.4-30.5 7.6-46.6 6.7l-189.9 85.6L400 520.9c-1.3-15.7 0.9-31.4 6.7-46.6 5.4-15.2 14.3-28.7 26.4-40.8 12.1-12.1 25.5-20.6 40.8-26.4 15.2-5.4 30.5-7.6 46.6-6.7l189-85.1zM560.8 512.8c0-13-4.9-24.2-14.8-34-9.9-9.9-21.5-14.8-34-14.8-13 0-24.2 4.9-34 14.8-9.9 9.9-14.8 21.5-14.8 34 0 13 4.9 24.2 14.8 34 9.9 9.9 21.5 14.8 34 14.8 13 0 24.6-4.5 34.9-13.9 9.4-10.3 13.9-21.9 13.9-34.9z m0 0"
            p-id="2771"
            fill="#312f2fc0"
          ></path>
        </svg>
        <span :class="{ close: isclosespan }"> 探索 </span>
      </router-link>
      <router-link class="nav-item" to="/mv" active-class="active">
        <svg
          t="1682135132997"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2166"
          width="20"
          height="20"
        >
          <path
            d="M698.4 850.3H103.9c-22.1 0-40-17.9-40-40V215.8c0-22.1 17.9-40 40-40h594.5c22.1 0 40 17.9 40 40v112.5l122-36.3c0.8-0.2 1.5-0.4 2.3-0.6 23.3-5.4 47.3 0 66 14.8 18.7 14.8 29.4 37.1 29.4 60.9V659c0 23.9-10.7 46.1-29.4 60.9-18.7 14.8-42.8 20.2-66 14.8-0.8-0.2-1.5-0.4-2.3-0.6l-122-36.3v112.5c0 22.1-17.9 40-40 40z m-554.5-80h514.5V644.2c0-12.6 6-24.5 16.1-32.1 10.1-7.5 23.2-9.9 35.3-6.3l168.4 50.1V370.2l-168.4 50.1c-12.1 3.6-25.2 1.3-35.3-6.3-10.1-7.5-16.1-19.4-16.1-32.1V255.8H143.9v514.5z"
            fill="#312f2fc0"
            p-id="2167"
          ></path>
          <path
            d="M301.4 686.6c-7.1 0-14.2-1.9-20.5-5.6-12.1-7.2-19.5-20.3-19.5-34.4V379.5c0-14.1 7.4-27.1 19.5-34.4 12.1-7.2 27.1-7.5 39.5-0.8l246.9 133.5c12.9 7 21 20.5 21 35.2s-8 28.2-21 35.2L320.5 681.8c-6 3.2-12.5 4.8-19.1 4.8z m40-240v132.8L464.2 513l-122.8-66.4z"
            fill="#312f2fc0"
            p-id="2168"
          ></path>
        </svg>
        <span :class="{ close: isclosespan }"> MV </span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "AsIde",
  data() {
    return {
      isclose: false,
      isclosespan: false,
      dynamicWidth: "calc(10% + 70px)",
      windowWidth: window.innerWidth
    };
  },
  watch: {
    windowWidth(oldwidth, newwidth) {
      if (oldwidth < newwidth && newwidth < 950 && this.isclose === false) {
        this.isclose = true;
        this.isclosespan = true;
        this.dynamicWidth = "calc(0.8% + 40px)";
      }
      if (oldwidth > newwidth && newwidth > 950 && this.isclose === false) {
        this.dynamicWidth = "calc(10% + 70px)";
      }
    },
  },
  methods: {
    //返回首页
    home() {
      this.$router.push({
        path: "/",
      });
    },
    //页面初始化完毕获取页面宽度
    getScreenWidth() {
      this.windowWidth = window.innerWidth;
    },
    //收放侧边栏
    closeaside() {
      this.isclose = !this.isclose;
      if (this.windowWidth < 950 && this.isclose === false) {
        this.dynamicWidth = "calc(1% + 160px)";
        setTimeout(() => {
          this.isclosespan = this.isclose;
        }, 100);
      } else {
        if (this.isclose) {
          this.isclosespan = this.isclose;
          this.dynamicWidth = "calc(0.8% + 40px)";
        } else {
          this.dynamicWidth = "calc(10% + 70px)";
          setTimeout(() => {
            this.isclosespan = this.isclose;
          }, 100);
        }
      }
    },
  },
  //获取页面宽度
  mounted() {
    window.addEventListener("resize", this.getScreenWidth);
  },
};
</script>

<style lang="scss" scoped>
.aside {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(245, 243, 243, 0.164);
  padding: 0 0.1rem;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(40px);
    z-index: -1;
  }
  .logo {
    display: flex;
    align-items: center;
    margin: 25px 0;
    img {
      height: 40px;
      width: 40px;
    }
    span {
      font-size: 20px;
      font-weight: bold;
      color: #303030e3;
      margin-left: 0.25rem;
      cursor: pointer;
    }
  }
  .nav-bar {
    display: flex;
    flex-direction: column;

    .nav-item {
      display: flex;
      align-items: center;
      padding: 9px;
      border-radius: 8px;
      margin-top: 5px;
      transition: background 0.5s ease, border 0.5s ease;
      span {
        margin-left: 0.25rem;
        font-size: 15px;
        font-weight: bold;
        color: #312f2fc0;
      }
      &.active {
        background-color: #2482e7fa;
        pointer-events: none;
        span {
          color: #fff;
        }
        svg {
          path {
            fill: #fff;
          }
        }
      }
      &:hover {
        background-color: #dddcdc98;
      }
    }
  }
  .close {
    display: none;
  }
}
</style>